
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>无标题文档</title>
<link href="css/bootstrap-4.3.1.css" rel="stylesheet" type="text/css">
</head>
<style>
	body{
		height: 100vh;
		margin: 0;
		padding: 0;
		background-image: url("imgs/background.jpg");
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.mark-box{
		background-color: rgba(255,255,255,.7);
		height: 100%;
		
	}
	.mbox{
		height: 100px;
	}
	.itemMenu{
		margin: 50px 0 10px 10px;
		background-color: rgba(194,194,194,.5);
		padding: 20px 50px;
		border: 2px solid skyblue;
		border-radius: 10px
	}
	.itemMenu:hover{
		background-color: rgba(50,196,139,0.78);
		transition:1s;
		border: 2px solid rgba(0,136,255,1.00);
		
	}
	</style>
<body>
	<div class="mark-box">
		<div class="mbox"></div>
	  <div class="sm-box">
		<h1 style="text-align: center">响应式布局</h1>
			<div class="d-flex flex-wrap justify-content-center">
		  		<a style="text-decoration: none;color:black" href="./网站布局.html"><div class="itemMenu">网站布局</div></a>
				<a style="text-decoration: none;color:black" href="./表单.html"><div class="itemMenu">表单</div></a>
				<a style="text-decoration: none;color:black" href="./表格.html"><div class="itemMenu">表格</div></a>
		  	</div>
      </div>
	</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
</body>
</html>
